<template>
	<div class="expertinfo">
		<mt-header fixed title="专家详情">
			<router-link to="/expertList" slot="left"><mt-button icon="back">返回</mt-button></router-link>
			<mt-button icon="more" slot="right"></mt-button>
		</mt-header>
		<!-- 专家头像 -->
		<div class="person" style="display: flex;align-items: center;">
			<img :src="expert.avatar" />
			<div class="right">
				<p style="font-weight: 700;color: #2C3E50;">{{ expert.name }}</p>
				<p>{{ expert.job }}</p>
			</div>
		</div>
		<!-- tab切换 -->
		<mt-navbar v-model="tabActive">
			<mt-tab-item id="tab1">专家简介</mt-tab-item>
			<mt-tab-item id="tab2">学术发言</mt-tab-item>
		</mt-navbar>
		<mt-tab-container v-model="tabActive" :swipeable="true">
			<mt-tab-container-item id="tab1"><div class="tabcont" v-html="expert.intro"></div></mt-tab-container-item>
			<mt-tab-container-item id="tab2"><p>《{{expert.task}}》</p></mt-tab-container-item>
		</mt-tab-container>
	</div>
</template>

<script>
import { Toast,Indicator } from 'mint-ui';
export default {
	data() {
		return {
			tabActive: 'tab1',
			expert: {}
		};
	},
	mounted() {
		Indicator.open();	//loading
		
		//专家数据
		this.$http.get("experts.json").then(res=>{
			Indicator.close();	//关闭loading
			let expertsData = res.data
			let expertid = this.$route.query.id;
			this.expert = expertsData.filter(item => item.id == expertid)[0];
		}).catch(err=>{
			Indicator.close();	//关闭loading
			Toast({
				message: "服务器请求失败",
				duration: 1000
			})
		})
	}
};
</script>

<style lang="scss">
.expertinfo {
	padding-top: 40px;
	.mint-navbar {
		background-color: #333;
		color: white !important;
	}
	.tabcont {
		padding: 0 0.8rem;
		p {
			text-align: left;
			font-size: 0.8rem;
		}
	}
	.person {
		padding: 10px;
		img {
			width: 4.375rem;
			height: 4.375rem;
			border-radius: 50%;
		}
		.right {
			margin-left: 0.625rem;
			p {
				text-align: left;
				margin: 5px 0;
			}
		}
	}
}
.mint-navbar .mint-tab-item {
	border-bottom: 3px solid #ccc;
	color: #ccc;
	&.is-selected {
		margin-bottom: 0;
		color: #fff;
		font-weight: 700;
	}
}
</style>
